<template>
  <div class="app-container">
    <div class="panel">
      <el-form :model="formInline" label-width="20%" class="search-form">
        <el-row :gutter="20">
          <el-col :span="7">
            <el-form-item label="出库单号" size="small">
              <el-input
                v-model="formInline.order_sn"
                placeholder="出库单号"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="选择物料" size="small">
              <el-select
                v-model="formInline.material_code"
                clearable
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in material"
                  :key="item.value"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="销售时间" size="small">
              <el-date-picker
                v-model="formInline.times"
                type="datetimerange"
                :picker-options="pickerOptions2"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd H:m:s"
                align="right"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="7">
            <el-form-item label="单据状态" size="small">
              <el-select v-model="formInline.bill_status" placeholder="请选择">
                <el-option
                  v-for="item in status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="打印状态" size="small">
              <el-radio
                v-model="formInline.print_status"
                class="custom_radio"
                label=""
                border
                >全部</el-radio
              >
              <el-radio
                v-model="formInline.print_status"
                class="custom_radio"
                label="0"
                border
                >未打印</el-radio
              >
              <el-radio
                v-model="formInline.print_status"
                class="custom_radio"
                label="1"
                border
                >已打印</el-radio
              >
            </el-form-item>
          </el-col>
          <el-col :span="10" align="right">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              class="search"
              @click="search"
              >查询</el-button
            >
            <el-button
              type="success"
              size="small"
              icon="el-icon-printer"
              class="search"
              @click="printHandle"
              :disabled="disabled1"
              >{{ print_button }}</el-button
            >
            <el-button
              type="success"
              size="small"
              icon="el-icon-printer"
              class="search"
              @click="printHandle"
              :disabled="disabled1"
              >打印面单</el-button
            >
            <el-button
              icon="el-icon-download"
              size="small"
              type="primary"
              @click.native="importDataEvent"
              class="search"
              >导入</el-button
            >
            <el-button
              icon="el-icon-upload2"
              size="small"
              type="primary"
              @click.native="exportDataEvent"
              class="search"
              >导出</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="source" v-loading="listLoading">
      <div class="tips">
        <span class="tips-item"
          >出库总量：<span class="numbs">{{ all_outbound_qty }}</span
          >公斤/Kg</span
        >
        <span class="tips-item"
          >待出库总量：<span class="numbs">{{ wait_outbound_qty }}</span
          >公斤/Kg</span
        >
        <span class="tips-item no-border"
          >已完成出库总量：<span class="numbs">{{ finish_outbound_qty }}</span
          >公斤/Kg</span
        >
      </div>
      <vxe-grid
        :data="list"
        border
        resizable
        highlight-hover-row
        show-overflow
        :export-config="{}"
        :import-config="{}"
        ref="xGrid"
        style="width: 100%"
        size="mini"
        :columns="columns"
        max-height="400"
        :seq-config="{
          startIndex: (tablePage.currentPage - 1) * tablePage.pageSize
        }"
      >
        <template #pager>
          <vxe-pager
            class="margin20"
            background
            size="mini"
            :current-page.sync="tablePage.currentPage"
            :page-size.sync="tablePage.pageSize"
            :page-sizes="tablePage.pageSizes"
            :total="tablePage.total"
            @page-change="handlePageChange"
            :layouts="[
              'PrevJump',
              'PrevPage',
              'Number',
              'NextPage',
              'NextJump',
              'FullJump',
              'Sizes',
              'Total'
            ]"
          >
          </vxe-pager>
        </template>
      </vxe-grid>
    </div>
  </div>
</template>

<script>
import { formatDate } from '@/utils/date'
import {
  getList,
  getMaterialList,
  changePrintStatus
} from '@/api/outboundExpress'
import { mapGetters } from 'vuex'
import JsBarcode from 'jsbarcode'
import XLSX from 'xlsx'
export default {
  name: 'outbound',
  data() {
    return {
      print_button: '打印单据',
      list: [],
      listLoading: true,
      status: [
        {
          value: '',
          label: '全部'
        },
        {
          value: 0,
          label: '待出库'
        },
        {
          value: 1,
          label: '出库中'
        },
        {
          value: 2,
          label: '取消'
        },
        {
          value: 3,
          label: '作废'
        },
        {
          value: 4,
          label: '完成'
        }
      ],
      material: [],
      pickerOptions2: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      formInline: {
        city_value: [],
        order_sn: '',
        bill_status: '',
        print_status: '0',
        material_code: '',
        start_time: '',
        end_time: '',
        times: []
      },
      all_outbound_qty: 0,
      wait_outbound_qty: 0,
      finish_outbound_qty: 0,
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 20,
        align: 'right',
        pageSizes: [1, 2, 5, 10],
        perfect: true
      },
      disabled1: false,
      disabled2: false,
      columns: [
        { type: 'checkbox', width: 50, fixed: 'left' },
        { field: 'id', title: 'ID', width: 80, fixed: 'left', align: 'center' },
        {
          field: 'outbound_order_sn',
          title: '出库单号',
          width: 240,
          fixed: 'left',
          align: 'center'
        },
        {
          field: 'express_order_sn',
          title: '单据编号',
          width: 240,
          align: 'center'
        },
        {
          field: 'csa_order_sn',
          title: 'CSA订单号',
          width: 240,
          align: 'center'
        },
        {
          field: 'express_number',
          title: '快运单号',
          width: 240,
          align: 'center'
        },
        {
          field: 'express_number_get_time',
          title: '回传时间',
          width: 240,
          align: 'center'
        },
        {
          field: 'express_name',
          title: '快运公司',
          width: 240,
          align: 'center'
        },
        {
          field: 'create_time',
          title: '出库时间',
          width: 150,
          align: 'center'
        },
        {
          field: 'bill_status',
          title: '单据状态',
          width: 150,
          align: 'center',
          formatter: this.parseStatus
        },
        {
          field: 'material_list',
          title: '发货信息',
          width: 350,
          showOverflow: true,
          align: 'center',
          slots: {
            default: ({ row }) => {
              const list = row.material_list
              let material = ''
              list.forEach((item) => {
                material =
                  material +
                  item.material_name +
                  '：' +
                  parseFloat(item.qty).toFixed(2) +
                  item.basic_measure_unit +
                  '；'
              })
              return [<span>{material}</span>]
            }
          }
        },
        {
          field: 'express_weight',
          title: '包裹重量',
          align: 'center',
          width: 180
        },
        {
          field: 'csa_person',
          title: '收货人',
          width: 180,
          align: 'center',
          showOverflow: true
        },
        {
          field: 'csa_tel',
          title: '收货电话',
          width: 180,
          align: 'center',
          showOverflow: true
        },
        {
          field: 'csa_address',
          title: '收货地址',
          align: 'center',
          showOverflow: true,
          width: 380
        },
        {
          field: 'print_status',
          title: '打印状态',
          width: 150,
          align: 'center',
          formatter: this.parsePrintStatus
        },
        {
          field: 'print_user_name',
          title: '打印人',
          width: 150,
          align: 'center'
        },
        { field: 'print_time', title: '打印时间', width: 180, align: 'center' }
      ]
    }
  },
  computed: {
    ...mapGetters(['citys'])
  },
  created() {
    this.$nextTick(() => {
      this.fetchData()
      getMaterialList().then((res) => {
        this.material = res.data.data
      })
    })
    if (!this.citys.length > 0) {
      this.$store
        .dispatch('GetCitys')
        .then(() => {})
        .catch(() => {})
    }
  },
  methods: {
    fetchData() {
      this.listLoading = true
      const datas = {
        limit: this.tablePage.pageSize,
        page: this.tablePage.currentPage,
        order_sn: this.formInline.order_sn,
        bill_status: this.formInline.bill_status,
        print_status: this.formInline.print_status,
        material_code: this.formInline.material_code,
        start_time:
          this.formInline.times != null ? this.formInline.times[0] : '',
        end_time: this.formInline.times != null ? this.formInline.times[1] : ''
      }
      getList(datas)
        .then((res) => {
          console.log(res)
          this.list = res.data.list
          this.tablePage.total = res.data.total
          this.all_outbound_qty = res.data.all_outbound_qty
          this.wait_outbound_qty = res.data.wait_outbound_qty
          this.finish_outbound_qty = res.data.finish_outbound_qty
          this.listLoading = false
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    search() {
      this.tablePage.currentPage = 1
      this.fetchData()
    },
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      this.fetchData()
    },
    parseStatus({ cellValue }) {
      let val = ''
      switch (cellValue) {
        case 0:
          val = '待出库'
          break
        case 1:
          val = '出库中'
          break
        case 2:
          val = '取消'
          break
        case 3:
          val = '作废'
          break
        case 4:
          val = '完成'
          break
      }
      return val
    },
    parsePrintStatus({ cellValue }) {
      let val = ''
      switch (cellValue) {
        case 0:
          val = '未打印'
          break
        case 1:
          val = '已打印'
          break
      }
      return val
    },
    parsePickStatus({ cellValue }) {
      let val = ''
      switch (cellValue) {
        case 0:
          val = '否'
          break
        case 1:
          val = '是'
          break
      }
      return val
    },
    printHandle() {
      this.disabled1 = true
      const grid = this.$refs.xGrid
      const list = grid.getCheckboxRecords() // 获取选中数据 Array
      if (list.length > 0) {
        this.printOrders(list)
        this.print_button = '打印中'
      } else {
        this.$message({
          message: '未选择任何数据',
          type: 'warning'
        })
        this.disabled1 = false
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    printOrders(list) {
      // console.log(list)
      // 打印样式
      const nowTime = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      const printStyle = `
              .header {
                width:100%;
                position:relative;
              }
              .bianhao{
                font-size: 11px;
              }
              .tables {
                width: 100%;
                text-align: left !important;
                font-size: 11px;
              }
              .top{
                text-align: center;
              }
              .title{
                font-weight: bold;
                font-size: 16rpx;
              }
              .header_table{
                padding-top:30px;
              }
              td{
                line-height:18px !important;
              }
              .ret{
                position: relative;
              }
              .qrcode {
                text-align: center;
                position: absolute;
                top:0px;
                right:0;
              }
              .content{
                margin: 10px 0;
                position: relative;
              }
              .content .table,.td{
                border:1px solid #000;
                border-collapse:collapse;
                font-size:10px;
                white-space: nowrap;
                overflow: hidden;
              }
              .table{
                width:100%;
                text-align: center;
              }
              .td{
                padding:2px 0 !important;
              }
              .footer{
                position: relative;
                display: flex;
                justify-content: space-between;
                padding-bottom: 45px;
              }
              .user_name{
                font-size: 40px;
              }
              `
      // 打印模板
      const printTmpls = []
      list.forEach((item, index) => {
        const material_list = item.material_list
        // 判断物料数量
        const chunk_m_list = this.chunk(material_list, 5)
        chunk_m_list.forEach((_item, _index) => {
          const img = document.createElement('img')
          // 生成条形码
          JsBarcode(img, item.outbound_order_sn, {
            lineColor: '#000',
            width: 1,
            height: 40,
            displayValue: false
          })
          const m_list = _item
          // 打印头部
          const topTmpl = `
              <div class="header">
                <div class="top">
                  <span class="title">销售出库单</span>
                  <div class="qrcode">
                     ${img.outerHTML}
                  </div>
                </div>

                <div class="header_table">
                   <table class="tables">
                     <tr>
                      <td>库存组织：${item.house_name}</td>
                      <td>业务日期：${item.create_time}</td>
                      <td class="ret">
                      </td>
                     </tr>
                     <tr>
                      <td>客户：${item.csa_user_name}</td>
                      <td>打印时间：${nowTime}</td>
                      <td>
                        单据编号：${item.outbound_order_sn}
                      </td>
                     </tr>
                   </table>
                </div>
              </div>
              `
          // 内容模板

          const contentTmpl = `
                <div class="content">
                  <table class="table">
                    <tr>
                      <td class="td td1">物料编码</td>
                      <td class="td td2" width="300">物料名称</td>
                      <td class="td td3">规格型号</td>
                      <td class="td td4">物料重量</td>
                      <td class="td td5">计量单位</td>
                      <td class="td td6">辅助数量</td>
                    </tr>
                    <tr>
                      <td class="td td1">
                      ${m_list[0] ? m_list[0].material_code : '-'}
                      </td>
                      <td class="td td2">
                      ${m_list[0] ? m_list[0].material_name : '-'}
                      </td>
                      <td class="td td3">
                      ${m_list[0] ? m_list[0].spec : '-'}
                      </td>
                      <td class="td td4">
                      ${m_list[0] ? m_list[0].qty : '-'}
                      </td>
                      <td class="td td5">
                      ${m_list[0] ? m_list[0].basic_measure_unit : '-'}
                      </td>
                      <td class="td td5">
                      ${m_list[0] ? m_list[0].assqty : '-'}
                      </td>
                    </tr>
                    <tr>
                      <td class="td td1">
                      ${m_list[1] ? m_list[1].material_code : '-'}
                      </td>
                      <td class="td td2">
                      ${m_list[1] ? m_list[1].material_name : '-'}
                      </td>
                      <td class="td td3">
                      ${m_list[1] ? m_list[1].spec : '-'}
                      </td>
                      <td class="td td4">
                      ${m_list[1] ? m_list[1].qty : '-'}
                      </td>
                      <td class="td td5">
                      ${m_list[1] ? m_list[1].basic_measure_unit : '-'}
                      </td>
                      <td class="td td5">
                      ${m_list[1] ? m_list[1].assqty : '-'}
                      </td>
                    </tr>
                    <tr>
                      <td class="td td1">
                      ${m_list[2] ? m_list[2].material_code : '-'}
                      </td>
                      <td class="td td2">
                      ${m_list[2] ? m_list[2].material_name : '-'}
                      </td>
                      <td class="td td3">
                      ${m_list[2] ? m_list[2].spec : '-'}
                      </td>
                      <td class="td td4">
                      ${m_list[2] ? m_list[2].qty : '-'}
                      </td>
                      <td class="td td5">
                      ${m_list[2] ? m_list[2].basic_measure_unit : '-'}
                      </td>
                      <td class="td td5">
                      ${m_list[2] ? m_list[2].assqty : '-'}
                      </td>
                    </tr>
                    <tr>
                      <td class="td td1">
                      ${m_list[3] ? m_list[3].material_code : '-'}
                      </td>
                      <td class="td td2">
                      ${m_list[3] ? m_list[3].material_name : '-'}
                      </td>
                      <td class="td td3">
                      ${m_list[3] ? m_list[3].spec : '-'}
                      </td>
                      <td class="td td4">
                      ${m_list[3] ? m_list[3].qty : '-'}
                      </td>
                      <td class="td td5">
                      ${m_list[3] ? m_list[3].basic_measure_unit : '-'}
                      </td>
                      <td class="td td5">
                      ${m_list[3] ? m_list[3].assqty : '-'}
                      </td>
                    </tr>
                    <tr>
                      <td class="td td1">
                      ${m_list[4] ? m_list[4].material_code : '-'}
                      </td>
                      <td class="td td2">
                      ${m_list[4] ? m_list[4].material_name : '-'}
                      </td>
                      <td class="td td3">
                      ${m_list[4] ? m_list[4].spec : '-'}
                      </td>
                      <td class="td td4">
                      ${m_list[4] ? m_list[4].qty : '-'}
                      </td>
                      <td class="td td5">
                      ${m_list[4] ? m_list[4].basic_measure_unit : '-'}
                      </td>
                      <td class="td td5">
                      ${m_list[4] ? m_list[4].assqty : '-'}
                      </td>
                    </tr>
                  </table>
                </div>
                `
          // 底部模板
          const footTmpl = `
              <div class="footer">
                <div class="user_name">${item.csa_person}：
                ${item.express_name}</div>
                <div>第${index + 1} - ${_index + 1}页</div>
              </div>
              `
          const printTmpl = topTmpl + contentTmpl + footTmpl
          printTmpls.push(printTmpl)
        })
      })
      this.$XPrint({
        sheetName: '打印出库单',
        style: printStyle,
        content: printTmpls.join('')
      })
      // 根据打印情况修改打印状态
      setTimeout(() => {
        this.$XModal.confirm('是否打印成功？').then((type) => {
          if (type === 'confirm') {
            let ids = ''
            for (let j = 0; j < list.length; j++) {
              if (j === 0) {
                ids = list[j].id
              } else {
                ids = ids + ',' + list[j].id
              }
            }
            this.changeStatus(ids, list)
          } else {
            this.print_button = '打印单据'
            this.disabled1 = false
          }
        })
      }, 10000)
    },
    chunk(arr, size) {
      const arr1 = []
      for (var ii = 0; ii < Math.ceil(arr.length / size); ii++) {
        arr1[ii] = []
      }
      let j = 0
      let x = 0
      for (let i = 0; i < arr.length; i++) {
        if (!(i % size === 0 && i !== 0)) {
          arr1[j][x] = arr[i]
          x++
        } else {
          j++
          x = 0
          arr1[j][x] = arr[i]
          x++
        }
      }
      return arr1
    },
    changeStatus(ids, list) {
      changePrintStatus(ids)
        .then(() => {
          const grid = this.$refs.xGrid
          grid.remove(list)
          this.print_button = '打印单据'
          this.disabled1 = false
        })
        .catch(() => {
          // 修改失败
          this.$XModal.confirm('打印状态更新失败，重试？').then((type) => {
            if (type === 'confirm') {
              this.changeStatus(ids)
            } else {
              this.print_button = '打印单据'
              this.disabled1 = false
            }
          })
        })
    },
    workbook2blob(workbook) {
      // 生成excel的配置项
      var wopts = {
        // 要生成的文件类型
        bookType: 'xls',
        // // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
        bookSST: false,
        type: 'binary'
      }
      var wbout = XLSX.write(workbook, wopts)
      // 将字符串转ArrayBuffer
      function s2ab(s) {
        var buf = new ArrayBuffer(s.length)
        var view = new Uint8Array(buf)
        for (var i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
        return buf
      }
      const buf = s2ab(wbout)
      var blob = new Blob([buf], {
        type: 'application/octet-stream'
      })
      return blob
    },

    // 将blob对象 创建bloburl,然后用a标签实现弹出下载框
    openDownloadDialog(blob, fileName) {
      if (typeof blob === 'object' && blob instanceof Blob) {
        blob = URL.createObjectURL(blob) // 创建blob地址
      }
      var aLink = document.createElement('a')
      aLink.href = blob
      aLink.download = fileName || ''
      var event
      if (window.MouseEvent) event = new MouseEvent('click')
      else {
        event = document.createEvent('MouseEvents')
        event.initMouseEvent(
          'click',
          true,
          false,
          window,
          0,
          0,
          0,
          0,
          0,
          false,
          false,
          false,
          false,
          0,
          null
        )
      }
      aLink.dispatchEvent(event)
    },
    exportExcel(list) {
      const newList = []
      list.forEach((item) => {
        const {
          express_order_sn,
          csa_order_sn,
          express_number,
          outbound_order_sn,
          express_number_get_time,
          express_name,
          csa_person,
          csa_address,
          material_list,
          csa_tel,
          express_weight
        } = item

        let material = ''
        material_list.forEach((item) => {
          material =
            material +
            item.material_name +
            '：' +
            parseFloat(item.qty).toFixed(2) +
            item.basic_measure_unit +
            '；'
        })
        newList.push({
          express_order_sn,
          csa_order_sn,
          express_number,
          outbound_order_sn,
          express_number_get_time,
          express_name,
          csa_person,
          csa_address,
          csa_tel,
          material,
          express_weight
        })
      })
      const sheet1data = newList
      var sheet1 = XLSX.utils.json_to_sheet(sheet1data)

      sheet1['A1'] = { t: 's', v: '单据编号' }
      sheet1['B1'] = { t: 's', v: 'CSA订单' }
      sheet1['C1'] = { t: 's', v: '快递单号' }
      sheet1['D1'] = { t: 's', v: '出库单号' }
      sheet1['E1'] = { t: 's', v: '上传日期' }
      sheet1['F1'] = { t: 's', v: '快递公司' }
      sheet1['G1'] = { t: 's', v: '收货人' }
      sheet1['H1'] = { t: 's', v: '收货地址' }
      sheet1['I1'] = { t: 's', v: '收货电话' }
      sheet1['J1'] = { t: 's', v: '发货信息' }
      sheet1['K1'] = { t: 's', v: '包裹重量' }
      console.log(sheet1)
      const style = {
        // 表头样式
        hs: {
          font: { sz: 10, color: { rgb: 'ff0000' }, bold: true },
          alignment: {
            horizontal: 'center',
            vertical: 'center',
            wrapText: true
          },
          fill: {
            bgColor: { indexed: 64 },
            fgColor: { rgb: 'FFFF00' }
          }
        },
        // 内容样式
        bs: {
          font: { sz: 11 },
          alignment: {
            horizontal: 'center',
            vertical: 'center',
            wrapText: true
          }
        }
      }
      sheet1['A1'].s = style.hs
      // 创建一个新的空的workbook
      var wb = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(wb, sheet1, 'sheet1')
      const workbookBlob = this.workbook2blob(wb)
      this.openDownloadDialog(workbookBlob, '快运表单.xls')
    },
    exportDataEvent() {
      const grid = this.$refs.xGrid
      const list = grid.getCheckboxRecords() // 获取选中数据 Array
      if (list.length > 0) {
        this.exportExcel(list)
      } else {
        this.$message({
          message: '未选择任何数据',
          type: 'warning'
        })
        this.disabled1 = false
      }
    },
    importDataEvent() {
      this.$refs.xGrid.importData({
        types: ['csv'],
        remote: true,
        message: true,
        importMethod: this.importServeData
      })
    },
    importServeData({ file, options }) {
      console.log(file, options)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form-item__content {
  margin-left: 0px !important;
}
.vxe-table {
  .vxe-cell {
    white-space: normal !important;
  }
}
.custom_radio {
  margin-right: 0px !important;
}
.my-list {
  white-space: normal !important;
  .vxe-table {
    .vxe-cell {
      white-space: normal !important;
    }
  }
}
.panel {
  padding: 24px;
  border: 1px solid #ebebeb;
  border-radius: 3px;
  transition: 0.2s;
  background-color: #f9fafc;
}
.source {
  padding: 24px;
  border: 1px solid #ebebeb;
  border-radius: 3px;
  transition: 0.2s;
  margin-top: 24px;
  .money {
    font-weight: bold;
  }
  .tips {
    padding: 0 0 15px;
    font-size: 12px;
    color: rgba($color: #000000, $alpha: 0.5);
    .tips-item {
      padding-right: 20px;
      padding-left: 20px;
      border-right: 1px solid #dcdfe6;
      .numbs {
        font-weight: 600;
        color: #f56c6c;
        font-size: 14px;
        padding: 0 5px 0 3px;
      }
    }
    .no-border {
      border: 0 !important;
    }
  }
  .margin20 {
    margin-top: 10px;
  }
}
.el-form-item {
  .el-input {
    width: 100%;
  }
  .el-select {
    width: 100%;
  }
  .el-date-editor {
    width: 100%;
  }
  .el-cascader {
    width: 100%;
  }
  .el-radio {
    margin-right: 0px !important;
  }
}
.custom_radio {
  margin-right: 0rpx !important;
}
.marginLeft10 {
  margin-left: 10px;
  display: inline;
  text-align: right;
}
</style>
